<template>
  <div class="storage-container">
    <el-row>
      <el-col :span="12" style="padding-right: 8px">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>存储量({{unit}}) @ {{date}}</span>
          </div>
          <annular-chart :chart-data="annularData"></annular-chart>
        </div>
      </el-col>
      <el-col :span="12" style="padding-left: 8px">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>近{{total_days}}日存储占用情况</span>
          </div>
          <bar-chart :chart-data="total_data"></bar-chart>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>HBase存储增量趋势</span>
            <el-radio-group v-model="radio_hbase" size="small">
              <el-radio-button :label="d" v-for="d in days">{{d}}天</el-radio-button>
            </el-radio-group>
          </div>
          <line-chart :chart-data="hbase_data" lineColor="#009ACD" areaColor="#00BFFF" theme="shine"></line-chart>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>Metadata存储增量趋势</span>
            <el-radio-group v-model="radio_metadata" size="mini">
              <el-radio-button :label="d" v-for="d in days">{{d}}天</el-radio-button>
            </el-radio-group>
          </div>
          <line-chart :chart-data="metadata_data" lineColor="#DEB887" areaColor="#E5E5E5" theme="shine"></line-chart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import LineChart from './components/LineChart'
  import AnnularChart from './components/AnnularChart'
  import BarChart from './components/BarChart'
  import storageApi from '@/api/kylin/storage'

  export default {
    name: 'storage',
    components: {
      LineChart,
      AnnularChart,
      BarChart
    },
    data() {
      return {
        total_data: null,
        hbase_data: null,
        metadata_data: null,
        total_days: 3,
        days: [7, 30],
        unit: null,
        date: null,
        radio_hbase: 7,
        radio_metadata: 7
      }
    },
    computed: {
      annularData() {
        if (this.total_data != null && this.total_data.length > 0) {
          return this.total_data[this.total_data.length - 1]
        }
        return null
      }
    },
    mounted: function() {
      this.total(this.total_days)
      this.hbase(this.days[0])
      this.metadata(this.days[0])
    },
    watch: {
      radio_hbase: {
        deep: true,
        handler(val) {
          this.hbase(val)
        }
      },
      radio_metadata: {
        deep: true,
        handler(val) {
          this.metadata(val)
        }
      }
    },
    methods: {
      total(days) {
        storageApi.total(days).then(resp => {
          this.total_data = resp.data.reverse()
          if (resp.data && resp.data.length > 0) {
            this.unit = resp.data[resp.data.length - 1].unit
            this.date = resp.data[resp.data.length - 1].date
          }
        })
      },
      hbase(days) {
        storageApi.hbase(days).then(resp => {
          this.hbase_data = resp.data
        })
      },
      metadata(days) {
        storageApi.metadata(days).then(resp => {
          this.metadata_data = resp.data
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .storage-container {
    padding: 15px;
    background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px;
    margin-bottom: 32px;
    border-radius: 8px;

  .chart-header {
    margin-bottom: 15px;
    line-height: 28px;
    display: flex;
    justify-content: space-between;

  i {
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;

  }

  .active {
    color: #409EFF;
  }

  .el-date-editor--daterange {
    width: 230px;

  }

  }
  }
  }

</style>
